<!-- 参考网址： -->
<!-- echarts实现中国地图记录篇之2D，3D地图 https://blog.csdn.net/weixin_42632751/article/details/129129089 -->
<!-- Echarts立体地图加3D柱图可点击可高亮选中的开发  https://www.cnblogs.com/flytree/p/15484161.html -->
<template>
  <div style="position: fixed; top: 10px; left: 10px; z-index: 9">
    <a-button type="primary" @click="onBackToChinaButtonClick()"> 返回全国地图 </a-button>
    <a-button type="primary" @click="onAddBarButtonClick"> 加3D柱状图 </a-button>
    <a-button type="primary" @click="onAddScatterButtonClick"> 加3D气泡图 </a-button>
  </div>
  <div class="map-wrap" id="echartsMap3dContainerId"> </div>
</template>
<script lang="ts">
  import {
    defineComponent,
    toRefs,
    reactive,
    ref,
    onBeforeMount,
    onMounted,
    onUnmounted,
    onBeforeUnmount,
    watch,
    nextTick,
  } from 'vue';
  import * as echarts from 'echarts';
  //需要引入echarts-gl扩展，否则map3D类型无法识别
  import 'echarts-gl';
  import _ from 'lodash';
  //引入axios用于读取本地geo的json文件
  import axios from 'axios';
  import { chinaBoundaryData, chinaData } from './chinaBoundary';
  import { geoCoordinatesData } from './chinaMap';

  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createErrorModal } = useMessage();

  export default defineComponent({
    name: 'EchartsChina3dMapTest',
    components: {},
    props: {},
    setup(props, context) {
      const { t } = useI18n();
      //map容器定义
      let mapContainer = null;
      //加载地图的行政区划名称和编码
      let adname = '云南省';
      let adcode = '530000';
      // let adname = 'china';
      // let adcode = '100000';
      //指定points中的气泡样式
      let points = [
        { station: '北京市', num: 10 },
        { station: '临沧市', num: 5 },
        { station: '西安市', num: 6 },
        { station: '普洱市', num: 5 },
        { station: '延庆区', num: 2 },
        { station: '丽江市', num: 8 },
      ];

      let points2 = [
        { station: '昆明市', num: 10 },
        { station: '成都市', num: 5 },
        { station: '哈密市', num: 6 },
        { station: '丽江市', num: 5 },
        { station: '北京市', num: 2 },
        { station: '吉林市', num: 8 },
      ];

      let addSeriesPoints = [
        { station: '曲靖市', num: 110 },
        { station: '玉溪市', num: 150 },
        { station: '保山市', num: 200 },
      ];

      //用于记录当前加载地图geoJson中行政区划信息集合，用于根据地名获取对应的编码等信息
      let geoJsonFeatures = [];

      const convertData = (data: any, geoCoorMap: any) => {
        const res = [];
        data.forEach((item) => {
          geoCoorMap.forEach((ele) => {
            if (ele.name.includes(item.station)) {
              res.push({
                name: item.station,
                value: ele.center.concat(item.num),
              });
            }
          });
        });
        return res;
      };

      //地图的底图只能通过设置geo3D或者series中type为map3D的其中之一进行设置，重复设置会导致地图重复（出现显示偏差）
      //实测确定：使用geo3D设置地图的底图及进行显示和视角控制，通过series设置叠加在地图之上的气泡或柱状图数据等
      //实测发现问题：通过geo3D设置地图的底图，鼠标移至区域和点击事件均无法触发；鼠标移至区域有报错：[ECharts] model or view can not be found by params
      //2025-5-8实测结论：通过geo3D设置地图底图的边界，通过series中叠加
      //2025-5-9实测结论：geo3D不设置任何地图和数据，均通过series中设置，先加载1个type: 'map3D'的作为地图，再通过动态添加序列显示柱状图或气泡图
      //不设置geo3D时，series中的柱状图或气泡图报错导致整个地图均无法显示：axios.get geo catch Error: geo "0" not found
      //最终使用方法：通过geo3D设置底图（show: false让底图不显示）、series中设置显示的地图（type: 'map3D'）、series中叠加柱状图或气泡图
      function initMap(adname, adcode) {
        // 获取原始地图json数据
        const url = `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=${adcode}_full`;
        axios
          .get(url)
          .then((res) => {
            //获取请求的响应结果
            let geoJsonData = res.data;
            mapContainer.clear();
            console.log('initMap echarts.registerMap ' + adname);
            echarts.registerMap(adname, geoJsonData);
            // 根据 json 数据拼装 mapdata， 用于地图点击下钻时传递数据，主要有adcode、name
            geoJsonFeatures = geoJsonData.features.map((item) => {
              return item.properties;
            });
            // 配置option
            let option = {
              title: {
                // 标题
                show: false,
                top: '20px',
                text: adname,
                subtext: '基于echarts-gl',
                x: 'center',
                textStyle: {
                  color: '#fff',
                },
              },
              tooltip: {
                trigger: 'item',
                formatter: function (params) {
                  // console.log('tooltip trigger item params', params);
                  // 根据需要进行数据处理或格式化操作
                  if (params.seriesType == 'bar3D') {
                    return [
                      params.seriesName,
                      params.name + '：' + params.value[2] + (params.value[3] || ''),
                    ].join('<br />');
                  } else if (params && params.data) {
                    const { adcode, name, level } = params.data;
                    // 返回自定义的tooltip内容
                    return `adcode: ${adcode}<br>name: ${name}<br>level: ${level}`;
                  } else {
                    return params;
                  }
                },
                backgroundColor: 'rgba(50, 50, 50, 0.8)',
                textStyle: {
                  color: '#FFFFFF',
                  textalign: 'center',
                  fontSize: 12,
                },
              },
              //地图的底图只能通过设置geo3D或者series中type为map3D的其中之一进行设置，重复设置会导致地图重复（出现显示偏差）
              //实测确定：使用geo3D设置地图的底图及进行显示和视角控制，通过series设置叠加在地图之上的气泡或柱状图数据等
              geo3D: {
                show: false,
                roam: true, // 是否允许缩放和平移
                map: adname, //指定使用的地图图层名称，必须与 echarts.registerMap中指定的名称完全一致
                viewControl: {
                  // 用于鼠标的旋转，缩放等视角控制。
                  projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                  autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                  autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                  autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                  autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                  damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                  rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                  zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                  panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                  panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                  rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                  distance: 100, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                  minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                  maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                  alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                  beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                  minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                  maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                  minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                  maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                  center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                  animation: true, // 是否开启动画。[ default: true ]
                  animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                  animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
                }, //地图的颜色
                itemStyle: {
                  // color: '#2AB8FF', // 地图板块的颜色，蓝绿色
                  color: '#013954', // 地图板块的颜色，浅蓝色
                  // color: 'rgb(147, 235, 248)',
                  //地图区域的颜色
                  // areaColor: 'transparent', //地图区域的颜色//可以设置为透明
                  // areaColor: {
                  //   x: 0,
                  //   y: 0,
                  //   x2: 0,
                  //   y2: 1,
                  //   colorStops: [
                  //     { offset: 0, color: 'rgba(9, 89, 169, 0.5)' },
                  //     { offset: 1, color: 'rgba(3, 25, 48, 0.5)' },
                  //   ],
                  // },
                  opacity: 0.8, // 图形的不透明度 [ default: 1 ]
                  // borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                  // borderColor: '#286ECA', // 图形描边的颜色。[ default: #333 ]
                  //图形的描边颜色
                  borderColor: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
                  // borderColor: new echarts.graphic.LinearGradient(
                  //   0,
                  //   0,
                  //   0,
                  //   1,
                  //   [
                  //     { offset: 0, color: '#0a94c2' },
                  //     { offset: 1, color: '#0982a9' },
                  //   ],
                  //   false,
                  // ),
                  borderWidth: 2,
                  //阴影颜色，实测设置后无效，最终显示颜色均为地图板块的颜色
                  // shadowColor: '#0f6b8a',
                  // shadowColor: '#ff0000',
                  // shadowColor: 'rgba(147, 235, 248,0.5)',
                  // shadowColor: 'rgba(9, 89, 169, 0.8)',
                  //阴影水平、垂直方向上的偏移距离；设置后会有立体效果
                  shadowOffsetX: 10,
                  shadowOffsetY: 10,
                  //图形阴影的模糊大小
                  shadowBlur: 10,
                },
                emphasis: {
                  // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                  label: {
                    // label 高亮时的配置
                    show: true,
                    color: '#fff', // 高亮时标签颜色变为 白色
                    fontSize: 18, // 高亮时标签字体 变大
                  },
                  itemStyle: {
                    // itemStyle 高亮时的配置
                    areaColor: '#66ffff', // 高亮时地图板块颜色改变
                  },
                },
                label: {
                  // 标签的相关设置
                  // show: name !== '中国', // (地图上的城市名称)是否显示标签 [ default: false ]
                  show: true,
                  formatter: function (params) {
                    return params.name ? params.name : ' ';
                  },
                  position: 'right',
                  // 标签的字体样式
                  color: '#fff', // 地图初始化区域字体颜色
                  fontSize: 12, // 字体大小
                },
                groundPlane: {
                  // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                  show: false, // 是否显示地面。[ default: false ]
                  color: '#aaa', // 地面颜色。[ default: '#aaa' ]
                },
                // shading: 'lambert', //三维地图中三维图形的着色效果，取值为：color、lambert、realistic
                light: {
                  // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                  main: {
                    // 场景主光源的设置，在 globe 组件中就是太阳光。
                    color: '#3D94CE', // 主光源的颜色。[ default: #fff ]
                    intensity: 1.2, // 主光源的强度。[ default: 1 ]
                    shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                    // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                    alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                    beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                  },
                  ambient: {
                    // 全局的环境光设置。
                    // color: 'red', // 环境光的颜色。[ default: #fff ]
                    intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                  },
                },
                //data设置为城市及对应经纬度集合
                // data: geoJsonFeatures,
                // 将geo3d放在最底层
                zlevel: -11,
              },
              series: [
                //使用geo3D设置地图的底图，此处不重复进行设置以免出现底图叠加错位问题
                {
                  type: 'map3D', //type只能是map3D
                  roam: true,
                  // aspectScale: 1, //长宽比
                  animation: false,
                  center: [105, 30],
                  zoom: 1,
                  map: adname, //指定使用的地图图层名称，必须与 echarts.registerMap中指定的名称完全一致
                  scaleLimit: {
                    min: 1,
                    max: 5,
                  },
                  zlevel: -10, //设置显示底层
                  regionHeight: 3, //三维地图每个区域的高度，设置后对每个区域均有效，可以通过data中的相同属性进行分区域控制
                  label: {
                    // 标签的相关设置
                    show: name !== '中国', // (地图上的城市名称)是否显示标签 [ default: false ]
                    formatter: function (params) {
                      return params.name ? params.name : ' ';
                    },
                    position: 'right',
                    // 标签的字体样式
                    color: '#fff', // 地图初始化区域字体颜色
                    fontSize: 12, // 字体大小
                  },
                  //地图的颜色
                  itemStyle: {
                    // color: '#2AB8FF', // 地图板块的颜色，蓝绿色
                    color: '#013954', // 地图板块的颜色，浅蓝色
                    // color: 'rgb(147, 235, 248)',
                    //地图区域的颜色
                    // areaColor: 'transparent', //地图区域的颜色//可以设置为透明
                    // areaColor: {
                    //   x: 0,
                    //   y: 0,
                    //   x2: 0,
                    //   y2: 1,
                    //   colorStops: [
                    //     { offset: 0, color: 'rgba(9, 89, 169, 0.5)' },
                    //     { offset: 1, color: 'rgba(3, 25, 48, 0.5)' },
                    //   ],
                    // },
                    opacity: 0.8, // 图形的不透明度 [ default: 1 ]
                    // borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                    // borderColor: '#286ECA', // 图形描边的颜色。[ default: #333 ]
                    //图形的描边颜色
                    borderColor: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
                    // borderColor: new echarts.graphic.LinearGradient(
                    //   0,
                    //   0,
                    //   0,
                    //   1,
                    //   [
                    //     { offset: 0, color: '#0a94c2' },
                    //     { offset: 1, color: '#0982a9' },
                    //   ],
                    //   false,
                    // ),
                    borderWidth: 2,
                    //阴影颜色，实测设置后无效，最终显示颜色均为地图板块的颜色
                    // shadowColor: '#0f6b8a',
                    // shadowColor: '#ff0000',
                    // shadowColor: 'rgba(147, 235, 248,0.5)',
                    // shadowColor: 'rgba(9, 89, 169, 0.8)',
                    //阴影水平、垂直方向上的偏移距离；设置后会有立体效果
                    shadowOffsetX: 10,
                    shadowOffsetY: 10,
                    //图形阴影的模糊大小
                    shadowBlur: 10,
                  },
                  emphasis: {
                    // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时  label和itemStyle 的样式)
                    label: {
                      // label 高亮时的配置
                      show: true,
                      // 标签的字体样式
                      color: '#fff', // 高亮时标签颜色变为 白色
                      fontSize: 18, // 高亮时标签字体 变大
                    },
                    itemStyle: {
                      // itemStyle 高亮时的配置
                      areaColor: '#66ffff', // 高亮时地图板块颜色改变
                    },
                  },
                  groundPlane: {
                    // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
                    show: false, // 是否显示地面。[ default: false ]
                    color: '#aaa', // 地面颜色。[ default: '#aaa' ]
                  },
                  // shading: 'lambert', //三维地图中三维图形的着色效果，取值为：color、lambert、realistic
                  light: {
                    // 光照相关的设置。在 shading 为 'color' 的时候无效。  光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
                    main: {
                      // 场景主光源的设置，在 globe 组件中就是太阳光。
                      color: '#3D94CE', // 主光源的颜色。[ default: #fff ]
                      intensity: 1.2, // 主光源的强度。[ default: 1 ]
                      shadow: false, // 主光源是否投射阴影。默认关闭。    开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                      // shadowQuality: 'high',      // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                      alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                      beta: 10, // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
                    },
                    ambient: {
                      // 全局的环境光设置。
                      // color: 'red', // 环境光的颜色。[ default: #fff ]
                      intensity: 0.5, // 环境光的强度。[ default: 0.2 ]
                    },
                  },
                  viewControl: {
                    // 用于鼠标的旋转，缩放等视角控制。
                    projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
                    autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
                    autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
                    autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                    autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
                    damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
                    rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。	rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
                    zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
                    panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
                    panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                    rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
                    distance: 100, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
                    minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
                    maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。
                    alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
                    beta: 0, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
                    minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                    maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                    minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                    maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                    center: [0, 0, 0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。
                    animation: true, // 是否开启动画。[ default: true ]
                    animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                    animationEasingUpdate: 'cubicInOut', // 过渡动画的缓动效果。[ default: cubicInOut ]
                  },
                  //不通过geo3D设置地图底图数据时，通过设置series的data进行设置
                  //不设置data时鼠标移至对应区域无法获取行政区划编码和名称
                  data: geoJsonFeatures,
                },
                //带有涟漪特效动画的散点（气泡）图
                {
                  type: 'scatter3D',
                  coordinateSystem: 'geo3D',
                  geoIndex: 0,
                  zlevel: 8,
                  itemStyle: {
                    color: 'rgb(147, 235, 248)',
                    // color: '#FFCC00',
                    opacity: 1,
                    borderWidth: 2,
                    borderColor: '#fff',
                  },
                  // symbol: 'arrow',
                  // symbol:
                  //   'path://M512 490.666667C453.12 490.666667 405.333333 442.88 405.333333 384 405.333333 325.12 453.12 277.333333 512 277.333333 570.88 277.333333 618.666667 325.12 618.666667 384 618.666667 442.88 570.88 490.666667 512 490.666667M512 85.333333C346.88 85.333333 213.333333 218.88 213.333333 384 213.333333 608 512 938.666667 512 938.666667 512 938.666667 810.666667 608 810.666667 384 810.666667 218.88 677.12 85.333333 512 85.333333Z',
                  symbol:
                    'path://M632.855273 565.992727c101.771636-47.080727 172.590545-149.317818 172.590545-267.869091 0-163.118545-133.678545-295.842909-298.007273-295.842909C343.202909 2.280727 209.454545 135.005091 209.454545 298.077091c0 118.597818 70.842182 220.834909 172.590545 267.915636C188.020364 622.336 44.311273 805.329455 38.469818 1024l46.615273 0 844.753455 0 46.638545 0C970.612364 805.329455 826.926545 622.336 632.855273 565.992727z',
                  symbolSize: [30, 30, 80], //宽，高，xx
                  // symbolSize: [10, 30],
                  data: convertData(points, geoJsonFeatures),
                  //设置直接在图标上方显示对应的数据值
                  label: {
                    show: true,
                    position: 'top',
                    formatter: function (params) {
                      return params.data.num;
                    },
                    fontSize: 18,
                  },
                },
                //3d柱状图
                {
                  name: 'city',
                  type: 'bar3D',
                  coordinateSystem: 'geo3D',
                  geoIndex: 0,
                  shading: 'lambert',
                  label: {
                    show: true,
                    position: 'top',
                  },
                  data: convertData(points2, geoJsonFeatures),
                  label: {
                    show: true,
                    position: 'top', // 可以选择显示在顶部、底部等位置
                    //在使用富文本标签时，formatter 函数返回的字符串中使用了 {a|...} 的形式来定义文本样式。其中 a 是样式名称，在 rich 中定义
                    formatter: function (params) {
                      return `{a|${params.value[2]}}`; // 只显示z轴的值，并自定义样式
                    },
                    rich: {
                      a: {
                        color: '#fff', // 文字颜色
                        backgroundColor: 'rgba(0,0,0,0.5)', // 背景颜色
                        borderRadius: 4, // 边框圆角
                        padding: [2, 4], // 内边距
                        boxShadowBlur: 4, // 阴影模糊大小
                        shadowColor: 'rgba(0,0,0,0.3)', // 阴影颜色
                      },
                    },
                  },
                  barSize: 2,
                  minHeight: 1,
                  itemStyle: {
                    color: '#FFB239', //柱子颜色为金黄色
                  },
                  emphasis: {
                    label: { show: true },
                  },
                  zlevel: 8,
                },
                //测试直接叠加通过点击按钮后加入的3D柱状图
                {
                  name: 'addBarSeries',
                  type: 'bar3D',
                  coordinateSystem: 'geo3D',
                  geoIndex: 0,
                  shading: 'lambert',
                  label: {
                    show: true,
                    position: 'top',
                  },
                  data: convertData(addSeriesPoints, geoJsonFeatures),
                  barSize: 2,
                  minHeight: 1,
                  itemStyle: {
                    color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
                  },
                  emphasis: {
                    label: { show: true },
                  },
                  zlevel: 8,
                },
              ],
            };
            //调用echarts的setOption更新地图显示
            mapContainer && mapContainer.setOption(option, true);
          })
          .catch((ex) => {
            console.log('axios.get geo catch', ex);
          });
      }

      //点击按钮返回到中国地图显示
      function onBackToChinaButtonClick() {
        console.log('onBackToChinaButtonClick');
        let n = 'china';
        let c = '100000';
        initMap(n, c);
      }

      //点击按钮添加3D柱状图显示
      //叠加3D柱状图后会导致地图中各行政区划名字显示文字字号变大、原地图中的柱状图柱子高度变小
      function onAddBarButtonClick() {
        const myOption = mapContainer.getOption();
        //构造1个柱状图Series对象
        let barSeries = {
          name: 'addBarSeries',
          type: 'bar3D',
          coordinateSystem: 'geo3D',
          geoIndex: 0,
          shading: 'lambert',
          label: {
            show: true,
            position: 'top',
          },
          data: convertData(addSeriesPoints, geoJsonFeatures),
          barSize: 2,
          minHeight: 1,
          itemStyle: {
            color: 'rgb(147, 235, 248)', //使用白色做亮边效果处理
          },
          emphasis: {
            label: { show: true },
          },
          // zlevel: 50,
        };
        //加入到option的series中
        myOption.series.push(barSeries);
        //调用echarts的setOption更新地图显示
        mapContainer && mapContainer.setOption(myOption, true);
      }
      function onAddScatterButtonClick() {}

      onMounted(() => {
        mapContainer = echarts.init(document.getElementById('echartsMap3dContainerId'));
        //指定行政区划编码进行地图注册
        initMap(adname, adcode);

        //在地图中注册鼠标点击事件
        mapContainer.off('click');
        mapContainer.on('click', (e) => {
          console.log('map3d click', e);
          //获取点击对应的行政区划名称和编码
          let geoProperty = e.data;
          if (geoProperty) {
            let c = geoProperty.adcode;
            let n = geoProperty.name;
            let level = geoProperty.level;
            //根据层级判断，只有在层级为省"province"、市"city"可以加载对应的地图，在层级为区县"district"无法加载
            if (level == 'province' || level == 'city') initMap(n, c);
            else
              createErrorModal({
                title: t('sys.api.errorTip'),
                content: '当前地图层级太小，无对应地图进行加载。',
                getContainer: () => document.body,
              });
          }
        });
        //在地图中统一处理缩放
        //georoam是针对2d地图，不适用于3D地图
        mapContainer.off('georoam');
        mapContainer.on('georoam', (e) => {
          console.log('map3d georoam', e);
          if (e.componentType === 'series') {
            const myOption = mapContainer.getOption();
            myOption.geo[0].zoom = myOption.series[0].zoom;
            myOption.geo[0].center = myOption.series[0].center;
            myOption.geo[1].zoom = myOption.series[0].zoom;
            myOption.geo[1].center = myOption.series[0].center;
            myOption.geo[2].zoom = myOption.series[0].zoom;
            myOption.geo[2].center = myOption.series[0].center;
            mapContainer.setOption(myOption);
          }
        });
      });
      return {
        onBackToChinaButtonClick,
        onAddBarButtonClick,
        onAddScatterButtonClick,
      };
    },
  });
</script>
<style scoped lang="less">
  .map-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    .full-map {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      background-color: transparent;
    }
  }
</style>
